<template>
  <div class="mod-service-notifyTemplate">
    <div class="main-container">
      <!-- 表格 -->
      <div class="table-con notify-template-table">
        <el-table
          ref="distributionProdListTableRef"
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
        >
          <el-table-column
            :label="$t('sysManagement.serialNumber')"
            type="index"
            :index="1"
            width="80"
          />
          <!-- 消息模板列表 -->
          <el-table-column
            prop="templateId"
            :label="$t('platform.msgTemplate')"
            width="120"
          >
            <template #default="scope">
              {{ scope.row.templateId }}
            </template>
          </el-table-column>
          <!-- 消息类型 -->
          <el-table-column
            prop="sendType"
            :label="$t('platform.msgType')"
          >
            <template #default="scope">
              <span v-if="scope.row.sendType === 1">{{ $t('platform.orderPay') }}</span>
              <span v-if="scope.row.sendType === 2">{{ $t('platform.paySuccNotify') }}</span>
              <span v-if="scope.row.sendType === 3">{{ $t('platform.merAgreeReturn') }}</span>
              <span v-if="scope.row.sendType === 4">{{ $t('order.refusedRefund') }}</span>
              <span v-if="scope.row.sendType === 5">{{ $t('platform.wriOffRem') }}</span>
              <span v-if="scope.row.sendType === 6">{{ $t('platform.shipRem') }}</span>
              <span v-if="scope.row.sendType === 7">{{ $t('platform.groupFailRem') }}</span>
              <span v-if="scope.row.sendType === 8">{{ $t('platform.groupSuccRem') }}</span>
              <span v-if="scope.row.sendType === 9">{{ $t('platform.startGroupRem') }}</span>
              <span v-if="scope.row.sendType === 10">{{ $t('platform.memUpRem') }}</span>
              <span v-if="scope.row.sendType === 11">{{ $t('platform.timeoutRem') }}</span>
              <span v-if="scope.row.sendType === 12">{{ $t('platform.register') }}</span>
              <span v-if="scope.row.sendType === 13">{{ $t('platform.login') }}</span>
              <span v-if="scope.row.sendType === 14">{{ $t('platform.updatePassword') }}</span>
              <span v-if="scope.row.sendType === 15">{{ $t('platform.vaild') }}</span>
              <span v-if="scope.row.sendType === 102">{{ $t('platform.confirmReceRem') }}</span>
              <span v-if="scope.row.sendType === 103 || scope.row.sendType === 104">
                {{ $t('platform.buyerReturnRem') }}
              </span>
              <span v-if="scope.row.sendType === 105">{{ $t('platform.buyerPaySuccessRem') }}</span>
            </template>
          </el-table-column>
          <!-- 通知内容 -->
          <el-table-column
            align="left"
            prop="message"
            :label="$t('platform.notifyConten')"
            width="500"
          >
            <template #default="scope">
              <span class="table-cell-text">
                {{ scope.row.message }}
              </span>
            </template>
          </el-table-column>
          <!-- 可用通知方式 -->
          <el-table-column
            prop="templateTypes"
            :label="$t('platform.canUseNotice')"
          >
            <template #default="scope">
              <div v-if="scope.row.sub || scope.row.sms || scope.row.app">
                <span
                  v-if="scope.row.sub"
                  class="template-types"
                >
                  {{ $t('platform.officialAccountNews') }}
                </span>
                <span
                  v-if="scope.row.sms"
                  class="template-types"
                >
                  {{ $t('sysManagement.shortMessage') }}
                </span>
                <span
                  v-if="scope.row.app"
                  class="template-types"
                >
                  {{ $t('platform.applet') }}
                </span>
              </div>
              <span
                v-else
                class="template-types"
              >-</span>
            </template>
          </el-table-column>
          <!-- 发送类型 -->
          <el-table-column
            prop="sendType"
            :label="$t('admin.sendType')"
          >
            <template #default="scope">
              <span v-if="scope.row.sendType > 100">{{ $t('admin.seller') }}</span>
              <span v-else>{{ $t('admin.buyer') }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            fixed="right"
            align="center"
            :label="$t('publics.operating')"
            width="100"
          >
            <template #default="scope">
              <div class="text-btn-con">
                <div
                  v-if="isAuth('admin:notifyTemplate:update')"
                  class="default-btn text-btn"
                  @click="onAddOrUpdate(scope.row.templateId)"
                >
                  {{ $t('crud.updateBtn') }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        v-if="dataList.length"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @update:page-size="onPageSizeChange"
        @update:current-page="onPageChange"
      />
    </div>

    <AddOrUpdate
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @close="addOrUpdateVisible = false"
      @refresh-data-list="refreshChange"
    />
  </div>
</template>
<script setup>
import { isAuth } from '@/utils'
import AddOrUpdate from './add-or-update.vue'

const addOrUpdateRef = ref(null)
const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
const searchForm = reactive({}) // 搜索
const dataListLoading = ref(false)
const addOrUpdateVisible = ref(false)

onMounted(() => {
  getDataList()
})

const getDataList = pageParam => {
  dataListLoading.value = true
  http({
    url: http.adornUrl('/admin/notifyTemplate/page'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        {
          current: pageParam == null ? page.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.pageSize : pageParam.pageSize
        },
        searchForm
      )
    )
  }).then(({ data }) => {
    dataList.value = data.records
    page.total = data.total
    dataListLoading.value = false
  })
}
// 新增 / 修改
const onAddOrUpdate = id => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value?.init(id)
  })
}
/**
 * 刷新回调
 */
const refreshChange = () => {
  page.currentPage = 1
  getDataList(page)
}

const onPageSizeChange = val => {
  page.pageSize = val
  getDataList(page)
}
const onPageChange = val => {
  page.currentPage = val
  getDataList(page)
}
</script>
<style lang="scss" scoped>
.mod-service-notifyTemplate {
  .main-container {
    padding-top: 0;
  }
  .template-types {
    padding: 0 5px;
  }
}
</style>
